<template>
  <div class="assertion">
    <el-form :model="form" label-width="auto">
      <el-form-item label="变量名称">
        <el-input v-model="form.name" class="!w-500px" placeholder="请输入断言名称" />
      </el-form-item>
      <el-form-item label="变量类型">
        <el-select v-model="form.type" placeholder="" class="!w-500px">
          <el-option label="环境变量" value="环境变量" />
          <el-option label="全局变量" value="全局变量" />
          <el-option label="临时变量" value="临时变量" />
        </el-select>
      </el-form-item>
      <el-form-item label="提取来源">
        <el-select v-model="form.source" placeholder="" class="!w-500px">
          <el-option label="Response Text" value="Response Text" />
          <el-option label="Response JSON" value="Response JSON" />
          <el-option label="Response Header" value="Response Header" />
        </el-select>
      </el-form-item>
      <el-form-item label="提取范围" v-if="['Response JSON'].includes(form.source)">
        <el-radio-group v-model="form.scope">
          <el-radio value="1">整个返回数据</el-radio>
          <el-radio value="2">提取部分</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="labelObj[form.source][0]" v-if="(['Response JSON'].includes(form.source) && form.scope == '2') || ['Response Header'].includes(form.source)">
        <el-input v-model="form.expression" class="!w-500px" :placeholder="labelObj[form.source][1]" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
const form = reactive({
  name: '',
  type: '环境变量',
  source: 'Response Text',
  scope: '1',
  expression: ''
})
const labelObj = ref({
  'Response JSON': ['JSONPath表达式', '如：$.store.book[0].title'],
  'Response XML': ['XPath表达式', ''],
  'Response Header': ['Header名', 'Header Name'],
  'Response Cookie': ['Cookie名', ''],
  '环境变量': ['变量名', ''],
  '全局变量': ['变量名', ''],
  '临时变量': ['变量名', '']
})
</script>

<style scoped>
.assertion {
  display: flex;
  justify-content: center;
}
</style>
